<template>
  <div class="containers main-box">
    <el-button
      type="success"
      size="small"
      icon="el-icon-zoom-in"
      @click="zoomViewport(true)"
    >放大</el-button>
    <el-button
      type="warning"
      size="small"
      icon="el-icon-zoom-out"
      @click="zoomViewport(false)"
    >缩小</el-button>
    <el-button
      type="info"
      size="small"
      icon="el-icon-rank"
      @click="fitViewport"
    >适中</el-button>
    <div ref="flowCanvas" class="canvas" />
  </div>
</template>
<script>
import { CustomViewer as BpmnViewer } from '@/components/customBpmn'

export default {
  name: 'FlowView',
  props: {
    xmlData: {
      type: String,
      default: ''
    },
    taskList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      bpmnViewer: null
    }
  },
  watch: {
    xmlData: function(val) {
      if (val) {
        this.getImg(val)
      }
    },
    taskList() {
      this.initBpmnViewer()
    }
  },
  activated() {
    this.initBpmnViewer()
  },
  mounted() {
    this.initBpmnViewer()
  },
  methods: {
    initBpmnViewer() {
      // 生成实例
      this.bpmnViewer && this.bpmnViewer.destroy()
      this.bpmnViewer = new BpmnViewer({
        container: this.$refs.flowCanvas,
        height: 'calc(100vh - 200px)'
      })
      this.getImg(this.xmlData)
    },
    // 获取流程图片
    async getImg(xmlUrl) {
      const self = this
      if (xmlUrl !== '') {
        try {
          await this.bpmnViewer.importXML(xmlUrl)
          this.fitViewport()
          if (this.taskList !== undefined) {
            this.fillColor()
          }
        } catch (err) {
          console.error(err.message, err.warnings)
        }
      }
    },
    // 设置高亮颜色的class
    setNodeColor(nodeCodes, colorClass, canvas) {
      for (let i = 0; i < nodeCodes.length; i++) {
        canvas.addMarker(nodeCodes[i], colorClass)
      }
    },
    // 让图能自适应屏幕
    fitViewport() {
      this.zoom = this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
    },
    // 放大缩小
    zoomViewport(zoomIn = true) {
      this.zoom = this.bpmnViewer.get('canvas').zoom()
      this.zoom += (zoomIn ? 0.1 : -0.1)
      if (this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
    },

    // 设置高亮颜色的
    fillColor() {
      const canvas = this.bpmnViewer.get('canvas')
      this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
        const completeTask = this.taskList.find(m => m.key === n.id)
        const todoTask = this.taskList.find(m => !m.completed)
        const endTask = this.taskList[this.taskList.length - 1]
        if (n.$type === 'bpmn:UserTask') {
          if (completeTask) {
            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
            n.outgoing?.forEach(nn => {
              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
              if (targetTask) {
                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                } else {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
              }
            })
          }
        } else if (n.$type === 'bpmn:ExclusiveGateway') { // 排他网关
          if (completeTask) {
            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
            n.outgoing?.forEach(nn => {
              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
              if (targetTask) {
                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
              }
            })
          }
        } else if (n.$type === 'bpmn:ParallelGateway') { // 并行网关
          if (completeTask) {
            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
            n.outgoing?.forEach(nn => {
              // debugger
              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
              if (targetTask) {
                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
              }
            })
          }
        } else if (n.$type === 'bpmn:StartEvent') {
          n.outgoing?.forEach(nn => {
            const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
            if (completeTask) {
              canvas.addMarker(nn.id, 'highlight')
              canvas.addMarker(n.id, 'highlight')
              return
            }
          })
        } else if (n.$type === 'bpmn:EndEvent') {
          if (endTask) {
            if (endTask.key === n.id && endTask.completed) {
              canvas.addMarker(n.id, 'highlight')
              return
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
  @import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
  ::v-deep .bjs-powered-by {
    display: none;
  }
  ::v-deep .view-mode {
    .el-header, .el-aside, .djs-palette, .bjs-powered-by {
      display: none;
    }
    .el-loading-mask {
      background-color: initial;
    }
    .el-loading-spinner {
      display: none;
    }
  }
 .containers {
    // background-color: #ffffff;
    width: 100%;
    height: 100%;
   .canvas {
      width: 100%;
      height: 100%;
    }
   ::v-deep .panel {
      position: absolute;
      right: 0;
      top: 50px;
      width: 300px;
    }
   ::v-deep .load {
      margin-right: 10px;
    }
   ::v-deep .el-form-item__label{
      font-size: 13px;
    }

   ::v-deep .djs-palette{
      left: 0px!important;
      top: 0px;
      border-top: none;
    }

   ::v-deep .djs-container svg {
      min-height: 650px;
    }

   ::v-deep .highlight.djs-shape .djs-visual > :nth-child(1) {
      fill: green !important;
      stroke: green !important;
      fill-opacity: 0.2 !important;
    }
   ::v-deep .highlight.djs-shape .djs-visual > :nth-child(2) {
      fill: green !important;
    }
   ::v-deep .highlight.djs-shape .djs-visual > path {
      fill: green !important;
      fill-opacity: 0.2 !important;
      stroke: green !important;
    }
   ::v-deep .highlight.djs-connection > .djs-visual > path {
      stroke: green !important;
    }
   ::v-deep .highlight-todo.djs-connection > .djs-visual > path {
      stroke: orange !important;
      stroke-dasharray: 4px !important;
      fill-opacity: 0.2 !important;
    }
   ::v-deep .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
      fill: orange !important;
      stroke: orange !important;
      stroke-dasharray: 4px !important;
      fill-opacity: 0.2 !important;
    }
   ::v-deep .overlays-div {
      font-size: 10px;
      color: red;
      width: 100px;
      top: -20px !important;
    }
  }
</style>
